<ModalDialog
  {id}
  {label}
  {title}
  background="var(--main-bg)"
  className="media-edit-dialog"
  on:show="measure()"
>
  <div class="media-edit-dialog-container">
    <div class="media-edit-header-and-item media-edit-header-and-item-alt">
      <h2>Description</h2>
      <MediaAltEditor
        className="media-edit-item"
        {realm}
        {index}
        {media}
        on:resize="measure()"
        ref:altEditor
      />
    </div>
    {#if type === 'image' || type === 'gifv'}
      <div class="media-edit-header-and-item media-edit-header-and-item-focal">
        <h2>{intl.previewFocalPoint}</h2>
        <MediaFocalPointEditor
          className="media-edit-item"
          {realm}
          {index}
          {media}
          ref:focalPointEditor
        />
      </div>
    {/if}
  </div>
</ModalDialog>
<style>
  :global(.media-edit-dialog) {
    max-width: calc(100%);
  }

  .media-edit-dialog-container {
    display: flex;
    flex-direction: row;
    max-height: calc(100% - 44px); /* 44px X button height */
    height: 100%;
    width: 100%;
  }

  .media-edit-header-and-item {
    padding: 10px;
  }

  .media-edit-header-and-item h2 {
    margin-bottom: 10px;
  }

  @media (max-width: 767px) {
    .media-edit-dialog-container {
      flex-direction: column;
      overflow: hidden;
    }

    .media-edit-dialog-container {
      max-height: calc(100% - 25px); /* 25px X button height */
    }

    .media-edit-header-and-item {
      flex: 1;
      min-height: 0;
      padding: 5px 10px;
    }
    .media-edit-header-and-item {
      display: flex;
      flex-direction: column;
    }

    :global(.media-edit-item) {
      flex: 1;
      min-height: 0;
    }
    .media-edit-header-and-item-alt {
      flex-basis: 40%;
    }
    .media-edit-header-and-item-focal {
      flex-basis: 60%;
    }

    .media-edit-header-and-item h2 {
      font-size: 1.2em;
      margin-bottom: 5px;
    }
  }

</style>
<script>
  import ModalDialog from './ModalDialog.html'
  import { show } from '../helpers/showDialog.js'
  import { close } from '../helpers/closeDialog.js'
  import { oncreate } from '../helpers/onCreateDialog.js'
  import MediaFocalPointEditor from '../components/MediaFocalPointEditor.html'
  import MediaAltEditor from '../components/MediaAltEditor.html'
  import { store } from '../../../_store/store.js'
  import { get } from '../../../_utils/lodash-lite.js'

  export default {
    oncreate,
    components: {
      ModalDialog,
      MediaFocalPointEditor,
      MediaAltEditor
    },
    methods: {
      show,
      close,
      measure () {
        this.refs.altEditor.measure()
        if (this.refs.focalPointEditor) {
          this.refs.focalPointEditor.measure()
        }
      }
    },
    store: () => store,
    computed: {
      media: ({ $currentInstance, $composeData, realm }) => (
        get($composeData, [$currentInstance, realm, 'media'])
      )
    }
  }
</script>
